@charset "utf-8";


@import "common/reset";
@import "common/common";

.web{
    height: 100%;
    header{
        p{
            text-align: center;
            font-size: r(26px);
        }
        .top_fenlei{
            margin-top: r(30px);
            margin-left: r(23px);
            margin-right: r(21px);
            height: r(57px);
            line-height: r(57px);
            a{
                float: left;
                font-size: r(26px);
                text-align: center;
                line-height: r(57px);
                height: r(57px);
                width: r(123px);
                display: inline-block;  
                border-radius: 10px;
                border: 1px solid $color;
                color: #000000;
            }
            .city{
                margin: 0;
            }
        }
    }
    main{
        width: 100%;
        overflow-y: scroll;
        position:absolute;
        top: r(149px);
        bottom: r(15px);
        .search{
            height: r(55px);
            width: r(269px);
            margin: 0 auto;
            box-sizing: border-box;
            border: 1px solid $color;
            margin-top: r(34px);
            border-radius: r(55px);
            padding-left: r(20px);
            padding-right: r(15px);
            position: relative;
            input[type='text']{
                height: 100%;
                width: r(191px); 
                border: none;
                font-size: r(24px);  
                color: #777777;
                padding: 0 r(7px);        
            }
            input[type=button]{
                height: r(34px);
                width: r(36px);
                background: url(../../../20170619/img/sousuo.jpg);             
            }
            .iconfont{
                position: absolute;
                font-size: r(34px);       
                right:r(12px);   
                top: 50%;
                color: $color;
                transform: translateY(-50%);
            }
        }
        p{
           margin-top: r(31px); 
           font-size: r(26px);
           text-align: center;
        }
        .dajia_sou{
            width: r(515px);
            height: r(132px);
            margin: auto;
            ul{
                li{
                    margin-top: r(5px);
                    span{
                        text-align: center;
                        line-height: r(64px);
                        width: r(124px);
                        height: r(64px);
                        display: inline-block;
                        background: #dcdcdc;
                        font-size: r(20px);
                        color: #898989;
                    }
                }
            }
        }
        .remensou{
            height: r(428px);
            margin-top: r(36px);
            margin-left: r(24px);
            margin-right: r(19px);
            .remensou_top{
                height: r(47px);
                margin-left: r(38px);
                margin-right: r(19px);
                p{
                    width: r(550px);
                    margin: 0;
                    text-align: initial;
                    font-size: r(30px);
                    span{
                        float: right;
                        img{
                            width: r(26px);
                            height: r(26px);
                        }
                    }
                }
                .remensoug_top_img{
                    display: inline-block;
                    width: r(32px);
                    height: r(47px);
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
                p{
                    display: inline-block;
                }
            }
            .remensou_img{
                margin-top: r(30px);
                height: r(352px);
                width: 100%;
                .left_img{
                    display: inline-block;
                    width: r(279px);
                    height: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .right_img{
                    display: inline-block;
                    width: r(360px);
                    height: 100%;
                    vertical-align: top;                   
                    div{
                        &:first-child{
                            height: r(146px);
                            margin-bottom: r(10px);
                            img{
                                height: 100%;
                                width: 100%;
                            }
                        }
                        &:nth-child(2){
                            display: inline-block;
                            height: r(196px);
                            width: r(180px);
                            img{
                                height: 100%;
                                width: 100%;
                            }
                        }
                        &:nth-child(3){
                            display: inline-block;
                            width: r(174px);
                            height: r(196px);
                            img{
                                height: 100%;
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        .tuijian{
            height: r(428px);
            margin-top: r(36px);
            margin-left: r(24px);
            margin-right: r(19px);
            .tuijian_top{
                height: r(47px);
                margin-left: r(38px);
                margin-right: r(19px);
                .icon-jinlingyingcaiwangtubiao29{
                    color: $color;
                    font-size: r(41px);
                }
                p{
                    display: inline-block;
                    width: r(540px);
                    margin: 0;
                    text-align: initial;
                    font-size: r(30px);
                    span{
                        float: right;
                        img{
                            width: r(26px);
                            height: r(26px);
                        }
                    }
                }
            } 
            .tuijiansou_img{
                height: r(200px);
                div{
                    &:first-child{
                        width: r(200px);
                        height: 100%;
                        margin-right: r(20px);
                        img{
                            height: 100%;
                            width: 100%;
                        }
                    }
                    &:nth-child(2){
                        width: r(200px);
                        height: 100%;
                        margin-right: r(24px);
                        img{
                            height: 100%;
                            width: 100%;
                        } 
                    }
                    &:last-child{
                        width: r(200px);
                        height: 100%;
                        img{
                            height: 100%;
                            width: 100%;
                        } 
                    }
                }
            }                   
        }
    }
    footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0px;
        padding-top: 5.5px;
        background-color: white;
        &::after{
            content: '';
            width: 100%;
            border-top: 1px solid rgba(7,17,27,.1);
            position: absolute;
            top: 0;
            transform: scaleY(1.5);
        }
        ul{
            display: flex;
            li{ 
                flex: 1;
                text-align: center;
                a{
                    display: block;
                    color: $color;      
                    div{
                        font-size: r(26px);
                    }     
                    i{
                        font-size: r(70px);
                    }                
                }
            }
        }
    }
}
